﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>人力资源档案登记</title>
    <!-- 引入 Vue 3 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css">
    <script src="//unpkg.com/element-plus"></script>

    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }

        /* 只对class为data-table的表格应用边框 */
        .data-table, .data-table th, .data-table td {
            border: 1px solid #000;
        }

        th {
            background-color: #FFD553;
            text-align: right;
            width: 120px;
        }

        td {
            padding: 6px;
        }

        select, input, textarea {
            width: 200px;
            box-sizing: border-box;
        }

        textarea {
            height: 80px;
        }


        .avatar-uploader .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }

        .avatar-uploader .el-upload {
            border: 1px dashed var(--el-border-color);
            border-radius: 6px;
            cursor: pointer;
             position: relative; 
             overflow: hidden; 
            transition: var(--el-transition-duration-fast);
        }

            .avatar-uploader .el-upload:hover {
                border-color: var(--el-color-primary);
            }

        .el-icon.avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            text-align: center;
        }

        .button-container {
            position: absolute;
            top: 0;
            right: 10px;
            margin-top: -5px; /* 与表格顶部的距离 */
            z-index: 10; /* 确保按钮在上方 */
        }

            .button-container button {
                margin-left: 10px; /* 按钮之间的间距 */
            }



        body {
            background-color: #FFFFCC;
        }




    </style>
</head>
<body>
    <div id="app">
        <span>您正在做的业务是: 人力资源--人力资源档案管理--人力资源档案登记</span>

      

        <form >
            <table class="data-table">

                <!-- 机构层级 -->
                <tr>
                    <th>机构</th>
                    <td colspan="5">

                        <el-cascader v-model="selectedOrg"
                                     :options="orgOptions"
                                     :props="cascaderProps"
                                     placeholder="请选择机构"
                                     clearable
                        v-on:change="handleOrgChange"
                                     class="w-full"
                                     style="width: 100%;">
                         </el-cascader>

                       
                        <!-- 添加隐藏字段用于表单提交 -->
                        <input type="hidden" name="first_kind_id" :value="selectedOrg[0]">
                        <input type="hidden" name="first_kind_name" :value="firstKindName">
                        <input type="hidden" name="second_kind_name" :value="form.secondKindName">
                        <input type="hidden" name="third_kind_name" :value="form.thirdKindName">

                    </td>



                    <td rowspan="3" style="padding: 10px,10px,10px,30px; border: none; position: absolute;">

                        <el-upload class="avatar-uploader" 
                                        action="/HRFR/WJSC" 
                                       :show-file-list="false" 
                                        :on-success="handleAvatarSuccess" 
                                        :before-upload="beforeAvatarUpload"> 
                                 <img v-if="imageUrl" :src="imageUrl" class="avatar" /> 
                                 <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon> 
                             </el-upload> 
                        
                    </td> 


                </tr>

                <!-- 职位信息 -->
                <tr>
                    <th>职位信息</th>
                    <td colspan="3">

                        <el-cascader v-model="selectedJob"
                                     :options="jobOptions"
                                     :props="jobCascaderProps"
                                     placeholder="请选择职位分类和名称"
                                     clearable
                        v-on:change ="handleJobChange"
                                     class="w-full"
                                     style="width: 100%;">
                        </el-cascader>
                        <!-- 职位隐藏字段 -->
                        @* <input type="hidden" name="job_category_id" :value="selectedJob[0] || ''"> *@
                        @* <input type="hidden" name="job_name_id" :value="selectedJob[1] || ''"> *@

                    </td>
                    
                    <th>职称</th>
                    <td>
                       
                        <el-select v-model="form.professionalTitle" placeholder="请选择">

                            <el-option v-for="item in options"
                                       :key="item.huf_id"
                                       :label="item.human_pro_designation"
                                       :value="item.human_pro_designation" />

                        </el-select>
                    </td>
                </tr>

                <!-- 基础信息 -->
                <tr>
                    <th>姓名</th>
                    <td><el-input type="text" v-model="form.name" /></td>
                    <th>性别</th>
                    <td>

                        <el-select v-model="form.gender" placeholder="请选择" >

                            <el-option v-for="item in options"
                                       :key="item.huf_id"
                                       :label="item.human_sex"
                                       :value="item.human_sex" />

                        </el-select>


                    </td>
                    <th>EMAIL</th>
                    <td><el-input type="text" v-model="form.email" /></td>
                </tr>

                <!-- 联系方式 -->
                <tr>
                    <th>电话</th>
                    <td><el-input type="text" v-model="form.phone" /></td>
                    <th>QQ</th>
                    <td><el-input type="text" v-model="form.qq" /></td>
                    <th>手机</th>
                    <td><el-input type="text" v-model="form.mobile" /></td>
                </tr>

                <!-- 地址信息 -->
                <tr>  
                    <th>住址</th>
                    <td colspan="3">
                        <el-input type="text" v-model="form.address" style="width:100%" />
                    </td>
                    <th>邮编</th>
                    <td><el-input type="text" v-model="form.zipCode" /></td>
                </tr>

                <!-- 个人背景 -->
                <tr>
                    <th>国籍</th>
                    <td>
                       
                        <el-select v-model="form.nationality" placeholder="请选择">

                            <el-option v-for="item in options"
                                       :key="item.huf_id"
                                       :label="item.human_nationality"
                                       :value="item.human_nationality" />

                        </el-select>

                    </td>
                    <th>出生地</th>
                    <td><el-input type="text" v-model="form.birthPlace" /></td>
                    <th>生日</th>
                    <td>

                        <el-input type="date" v-model="form.birthday"></el-input>
                      

                    </td>
                    <th>民族</th>
                    <td>
                       
                        <el-select v-model="form.nation" placeholder="请选择">

                            <el-option v-for="item in options"
                                       :key="item.huf_id"
                                       :label="item.human_race"
                                       :value="item.human_race" />

                        </el-select>

                    </td>
                </tr>

                <!-- 政治信息 -->
                <tr>
                    <th>宗教信仰</th>
                    <td>
                      
                        <el-select v-model="form.religion" placeholder="请选择">

                            <el-option v-for="item in options"
                                       :key="item.huf_id"
                                       :label="item.human_religion"
                                       :value="item.human_religion" />

                        </el-select>

                    </td>
                    <th>政治面貌</th>
                    <td>
                       
                        <el-select v-model="form.politicalStatus" placeholder="请选择">

                            <el-option v-for="item in options"
                                       :key="item.huf_id"
                                       :label="item.human_party"
                                       :value="item.human_party" />

                        </el-select>

                    </td>
                    <th>身份证号码</th>
                    <td><el-input type="text" v-model="form.idCard" /></td>
                    <th>社会保障号码</th>
                    <td><el-input type="text" v-model="form.socialSecurityNo" /></td>
                </tr>

                <!-- 教育信息 -->
                <tr>
                    <th>年龄</th>
                    <td><el-input type="text" v-model="form.age" /></td>
                    <th>学历</th>
                    <td>
                       
                        <el-select v-model="form.education" placeholder="请选择">

                            <el-option v-for="item in options"
                                       :key="item.huf_id"
                                       :label="item.human_educated_degree"
                                       :value="item.human_educated_degree" />

                        </el-select>

                    </td>
                    <th>教育年限</th>
                    <td>
                      
                        <el-select v-model="form.educationYears" placeholder="请选择">

                            <el-option v-for="item in options"
                                       :key="item.huf_id"
                                       :label="item.human_educated_years"
                                       :value="item.human_educated_years" />

                        </el-select>

                    </td>
                    <th>学历专业</th>
                    <td>
                      
                        <el-select v-model="form.major" placeholder="请选择">

                            <el-option v-for="item in options"
                                       :key="item.huf_id"
                                       :label="item.human_educated_major"
                                       :value="item.human_educated_major" />

                        </el-select>

                    </td>
                </tr>

                <!-- 薪酬信息 -->
                <tr>
                    <th>薪酬标准</th>
                    <td>

                        @* <el-select v-model="form.salaryStandard" placeholder="请选择薪酬标准" v-on:change ="handleSalaryChange"> *@
                            
                        @*     <el-option v-for="item in salaryOptions" :key="item.value" :label="item.label" :value="item.label" /> *@
                        @* </el-select> *@

                        <!-- 修改后 -->
                        <el-select v-model="form.salaryStandardId" placeholder="请选择薪酬标准" v-on:change="handleSalaryChange">
                            <!-- :value绑定唯一编号（item.value），:label显示名称（不影响用户体验） -->
                            <el-option v-for="item in salaryOptions" :key="item.value" :label="item.label" :value="item.value" />
                        </el-select>


                    </td>
                    <th>开户行</th>
                    <td><el-input type="text" v-model="form.bank" /></td>
                    <th>帐号</th>
                    <td><el-input type="text" v-model="form.bankAccount" /></td>
                    <th>登记人</th>
                    <td><el-input type="text" v-model="form.registrant" /></td>
                </tr>

                <tr>

                    <th>基本薪酬总额</th>
                    <td>
                        <el-input type="text" v-model="form.salary_sum" readonly />
                    </td>
                    <th>应发薪酬总额</th>
                     <td>
                         <el-input type="text" v-model="form.demand_salaray_sum" />
                     </td>
                    <th>实发薪酬总额</th>
                      <td>
                          <el-input type="text" v-model="form.paid_salary_sum" />
                      </td>
                </tr>



                <!-- 时间与特长 -->
                <tr>
                    <th>建档时间</th>
                    <td>
                        <el-input type="text"
                               v-model="form.registrationTime"
                               placeholder="实时时间"
                               readonly 
                       ></el-input>
                       

                    </td>
                    <th>特长</th>
                    <td>

                        <el-select v-model="form.specialty" placeholder="请选择">

                            <el-option v-for="item in options"
                                       :key="item.huf_id"
                                       :label="item.human_speciality"
                                       :value="item.human_speciality" />

                        </el-select>
                        
                    </td>
                    <th>爱好</th>
                    <td>

                        <el-select v-model="form.hobby" placeholder="请选择">

                            <el-option v-for="item in options"
                                       :key="item.huf_id"
                                       :label="item.human_hobby"
                                       :value="item.human_hobby" />

                        </el-select>


                    </td>
                </tr>

                <!-- 文本区域 -->
                <tr>
                    <th>个人履历</th>
                    <td colspan="7"> <el-input v-model="form.personalResume" type="textarea" :rows="2" /> </td>
                </tr>
                <tr>
                    <th>家庭关系信息</th>
                    <td colspan="7"> <el-input v-model="form.familyRelation" type="textarea" :rows="2" />   </td>
                </tr>
                <tr>
                    <th>备注</th>
                    <td colspan="7"> <el-input v-model="form.remark" type="textarea" :rows="2" />  </td>
                </tr>

             

            </table>

            <!-- 按钮容器，放置在表格外部 -->
            <div class="button-container">
                <el-button type="button" v-on:click="handleSubmit">提交</el-button>
                <el-button type="button" v-on:click="clearForm">清除</el-button>
            </div>

        </form>

    </div>

    <script>
        const { createApp, reactive,ref,onMounted,nextTick } = Vue;
            const { ElMessage } = ElementPlus;
        const app = createApp({
            setup() {

                // 响应式表单数据
                const form = reactive({
                    firstKindName: '',         // I级机构名称
                    secondKindName: '',        // II级机构名称
                    thirdKindName: '',         // III级机构名称
                    jobCategory: '',           // 职位分类
                    jobName: '',               // 职位名称
                    professionalTitle: '',     // 职称
                    name: '',                  // 姓名
                    gender: '',                // 性别
                    email: '',                 // 邮箱
                    phone: '',                 // 电话
                    qq: '',                    // QQ
                    mobile: '',                // 手机
                    address: '',               // 住址
                    zipCode: '',               // 邮编
                    nationality: '',           // 国籍
                    birthPlace: '',            // 出生地
                    birthday: '',              // 生日
                    nation: '',                // 民族
                    religion: '',              // 宗教信仰
                    politicalStatus: '',       // 政治面貌
                    idCard: '',                // 身份证号码
                    socialSecurityNo: '',      // 社保号码
                    age: '',                   // 年龄
                    education: '',             // 学历
                    educationYears: '',        // 教育年限
                    major: '',                 // 专业
                    salaryStandard: '',        // 薪酬标准
                    bank: '',                  // 开户行
                    bankAccount: '',           // 银行账号
                    registrant: '',            // 登记人
                    registrationTime: '',      // 建档时间
                    specialty: '',             // 特长
                    hobby: '',                 // 爱好
                    personalResume: '',        // 个人履历
                    familyRelation: '',        // 家庭关系
                    remark: '' ,                // 备注
                     
                    salaryStandardId: '',    // 薪酬标准编号（新增）
                    jobCategoryId: '',       // 职位分类编号（新增）
                    jobNameId: '',           // 职位名称编号（新增）

                    check_status: '',
                    salary_sum:'',
                    demand_salaray_sum:'',
                    paid_salary_sum:'',
                    
                });


                 



                 const options = ref([]);

                 function xlk(){
             axios.get('/GetGenderOptions') // 调用后端接口
            .then(res => {
                options.value = res.data; // 赋值给响应式变量
                 console.log('数据格式:', res.data);
                console.log('下拉框数据加载成功:', options.value);
            })
            .catch(err => {
                console.error('加载性别数据失败:', err);
            });
                 }

                 xlk();

                  // 机构选择相关
                const selectedOrg = ref([]);  // 选中的机构ID数组
                const orgOptions = ref([]);   // 级联选择器的选项数据
            

                // 级联选择器配置
                const cascaderProps = ref({
                    expandTrigger: 'click',
                    value: 'id',
                    label: 'name',
                    children: 'children',
                    checkStrictly: false
                });

                // 获取机构数据
                const fetchOrgData = async () => {
                    try {
                        const response = await axios.get('/FirstLevelCXJL');
                        console.log(response.data)
                        orgOptions.value = response.data;
                         console.log('级联数据:', orgOptions.value); // 确保数据非空
                         
                    } catch (error) {
                        console.error('获取机构数据失败:', error);
                        ElMessage.error('获取机构数据失败，请重试');
                    }
                };
                
                // 处理级联选择变化
                const handleOrgChange = (value) => {
                   // 原有逻辑...
                 console.log('各级机构名称：', form.firstKindName, form.secondKindName, form.thirdKindName);

                             // 清空名称
                form.firstKindName = form.secondKindName = form.thirdKindName = '';

                // 处理I级
                if (value[0]) {
                    const firstNode = orgOptions.value.find(node => node.id === value[0]);
                    if (firstNode) {
                        form.firstKindName = firstNode.name;

                        // 处理II级
                        if (value[1]) {
                            const secondNode = firstNode.children.find(node => node.id === value[1]);
                            if (secondNode) {
                                form.secondKindName = secondNode.name;

                                // 处理III级
                                if (value[2]) {
                                    const thirdNode = secondNode.children.find(node => node.id === value[2]);
                                    form.thirdKindName = thirdNode?.name || '';
                                }
                            }
                        }
                    }
                }

                // 打印最终结果
               console.log('---------------------');
               console.log('选中机构名称：');
               console.log('I级:', form.firstKindName);
               console.log('II级:', form.secondKindName);
               console.log('III级:', form.thirdKindName);
               console.log('---------------------');

                };


               
                    fetchOrgData();
                    
            
             // 初始化时设置当前时间
                const updateTime = () => {
                    const now = new Date();
                    // 格式化时间为 YYYY-MM-DD HH:mm:ss
                    const formattedTime = now.toISOString().split('T')[0] + ' ' + now.toTimeString().split(' ')[0];
                  
                    // 同时赋值给表单字段（如需提交实时时间）
                    form.registrationTime = formattedTime;
                };



                 updateTime(); // 初始化时间
                    // 每秒更新时间（动态显示）
                    setInterval(updateTime, 1000);




                // 提交表单
            async  function handleSubmit(){

            console.log('提交的表单数据：', form);

                         
            // 表单验证
            if (!form.name || !form.birthday || !selectedOrg.value.length) {
                ElMessage.error('请填写姓名、生日和机构信息');
                return;
            }

            // 1. 根据选中的薪酬标准名称，匹配对应的编号
            let salaryId = '';
            if (form.salaryStandard) {
              const matchedSalary = salaryOptions.value.find(
                item => item.label === form.salaryStandard
              );
              if (matchedSalary) {
                salaryId = matchedSalary.value; // 获取薪酬标准编号
              }
            }

          


            // 处理日期格式（转为后端需要的格式）
            const formattedBirthday = new Date(form.birthday).toISOString();
            const formattedRegTime = new Date().toISOString();

            // 组装请求数据（与后端模型属性对应）
            const requestData = {
                // 机构信息
                first_kind_id: selectedOrg.value[0] || 0,
                first_kind_name: form.firstKindName || '',
                second_kind_id: selectedOrg.value[1] || 0,
                second_kind_name: form.secondKindName || '',
                third_kind_id: selectedOrg.value[2] || 0,
                third_kind_name: form.thirdKindName || '',

                // 基础信息
                human_name: form.name,
                human_sex: form.gender,
                human_birthday: formattedBirthday,
                human_birthplace: form.birthPlace,
                human_nationality: form.nationality,
                human_race: form.nation,
                human_picture:fileName.value,

                // 联系方式
                human_telephone: form.phone,
                human_mobilephone: form.mobile,
                human_email: form.email,
                human_qq: form.qq,

                // 地址信息
                human_address: form.address,
                human_postcode: form.zipCode,

                // 政治信息
                human_religion: form.religion,
                human_party: form.politicalStatus,
                human_id_card: form.idCard,
                human_society_security_id: form.socialSecurityNo,

                // 教育信息
                human_age: form.age,
                human_educated_degree: form.education,
                human_educated_years: form.educationYears,
                human_educated_major: form.major,

                // 薪酬信息
                salary_standard_id: salaryId,
                salary_standard_name: form.salaryStandard,
                human_bank: form.bank,
                human_account: form.bankAccount,
                register: form.registrant,
                regist_time: formattedRegTime,

                // 其他信息
                human_speciality: form.specialty,
                human_hobby: form.hobby,
                remark: form.remark,
                human_histroy_records: form.personalResume,
                human_family_membership: form.familyRelation,

                human_pro_designation:form.professionalTitle,

               // 职位信息
                human_major_kind_id: selectedJob.value[0] || '',
                human_major_kind_name: form.jobCategory || '',
                human_major_id: selectedJob.value[1] || '',
                hunma_major_name: form.jobName || '',

                salary_sum: form.salary_sum,
                demand_salaray_sum: form.demand_salaray_sum,
                paid_salary_sum:form.paid_salary_sum ,

                check_status:0,


            };

            console.log('查看登记提交的数据',requestData);

            // 发送POST请求到后端API
            const response = await axios.post('/HRFR/Add', requestData);


            // 处理响应
            if (response.data) {   

                  ElMessage.success('登记成功');
                            // 跳转到指定页面
                     window.setTimeout(() => {
                             window.location.href = '/HRFR/Success';
                            }, 1500);

                clearForm(); // 清空表单

            } 
       
            };


                // 清除表单
                const clearForm = () => {
                    Object.keys(form).forEach(key => form[key] = '');
                };



                    // 定义图片相关变量
                     const imageUrl = ref(''); // 图片URL
                     const fileName = ref('');// 文件名


                     const handleAvatarSuccess=(response,uploadFile)=>{
                          console.log('后端返回数据:', uploadFile);
                              
                                     // 更新图片URL为服务器路径
                                    // imageUrl.value = uploadFile.response.filePath;

                       fileName.value=uploadFile.response.wjnames;


                     }


                    const beforeAvatarUpload = (rawFile) => {
                     // 允许的图片类型（JPG/JPEG/PNG/GIF）
                   const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif'];
                   const isAllowedType = allowedTypes.includes(rawFile.type);
                   const isLt2M = rawFile.size / 1024 / 1024 < 2;

                    if (!isAllowedType) {
                        ElMessage.error('仅支持 JPG/JPEG/PNG/GIF 格式图片');
                        return false;
                    }
                    if (!isLt2M) {
                    ElMessage.error('文件大小不能超过 2MB');
                    return false;
                    }



                        //预览图片
                       const reader = new FileReader();
                       reader.onload = (e) => {
                           imageUrl.value = e.target.result;
                       };
                       reader.readAsDataURL(rawFile);

                      // 保存文件名
                      //  fileName.value = rawFile.name;


                    return true;


                    };

                            // 修改后：通过编号（item.value）匹配（唯一）
        const handleSalaryChange = (selectedId) => {
          // selectedId 是选中的薪酬标准编号（item.value，即:key绑定的唯一值）
          const matchedSalary = salaryOptions.value.find(item => item.value === selectedId);
          if (matchedSalary && matchedSalary.salarySum) {
            form.salary_sum = matchedSalary.salarySum; // 填充对应的基本薪酬总额
            form.salaryStandard = matchedSalary.label; // 同步显示选中的名称（可选，用于表单显示）
          } else {
            form.salary_sum = '';
            form.salaryStandard = '';
          }
        };



        // 职位级联选择相关（新增部分）
                const selectedJob = ref([]);   // 选中的职位ID数组 [职位分类ID, 职位名称ID]
                const jobOptions = ref([]);     // 职位级联选择器的选项数据

                // 职位级联选择器配置
                const jobCascaderProps = ref({
                    expandTrigger: 'click',
                    value: 'id',
                    label: 'name',
                    children: 'children',
                    checkStrictly: false
                });

                // 获取职位级联数据
                const fetchJobData = async () => {
                    try {
                        const response = await axios.get('/JobCategoryCXDD');
                        jobOptions.value = response.data;
                        console.log('职位级联数据:', jobOptions.value);
                    } catch (error) {
                        console.error('获取职位数据失败:', error);
                        ElMessage.error('获取职位数据失败，请重试');
                    }
                };

                // 处理职位级联选择变化
                const handleJobChange = (value) => {
                    form.jobCategory = '';
                    form.jobName = '';

                    if (value && value.length >= 1) {
                        const categoryNode = jobOptions.value.find(node => node.id === value[0]);
                        if (categoryNode) {
                            form.jobCategory = categoryNode.name;

                            if (value.length >= 2) {
                                const jobNode = categoryNode.children.find(node => node.id === value[1]);
                                if (jobNode) {
                                    form.jobName = jobNode.name;
                                }
                            }
                        }
                    }
                    console.log('职位选择结果:', {
                        职位分类: form.jobCategory,
                        职位名称: form.jobName
                    });
                };



                fetchJobData();


                      const salaryOptions = ref([]);

                     

                        // 页面加载时获取登记人信息
        const getRegistrant = async () => {
            try {
                const response = await axios.get('/HRFR/GetRegistrant');
                if (response.data) {
                    form.registrant = response.data.registrant; // 赋值给表单
                    console.log('登记人信息:', form.registrant);
                } else {
                    ElMessage.warning(response.data.message);
                }
            } catch (error) {
                console.error('获取登记人信息失败:', error);
                ElMessage.error('获取登记人信息失败');
            }
        };



                     onMounted( async()=>{

                           //获取薪酬标准（有编号）
                          const salaryRes = await axios.get('/HRFR/GetSalaryStandardsED');
                          salaryOptions.value = salaryRes.data;
                          

                          console.log('薪酬值为',salaryRes.data);
                         
                           await getRegistrant();


                     })







         


                return { 
                    
                    form, 
                    handleSubmit,
                    clearForm,
                    selectedOrg,
                    orgOptions,
                    cascaderProps,
                    handleOrgChange,
                    xlk,
                    options,
                    imageUrl,
                    fileName,
                    handleAvatarSuccess,
                    beforeAvatarUpload,
                    salaryOptions,
                    handleSalaryChange,

                    selectedJob,
                    jobOptions,
                    jobCascaderProps,
                    handleJobChange,


                };



            }
        })
        

         app.use(ElementPlus).mount('#app');
      

    </script>
</body>
</html>  